<template>
    <div class="dark-container">
        <van-cell center title="切换主题(通过css --参数，和var(参数)">
            <template #right-icon>
                <van-switch @change="changeSwitch" v-model="checked"/>
            </template>
        </van-cell>
    </div>
</template>

<script>
import { Switch, Cell } from 'vant'
import { defineComponent, ref, inject } from 'vue'
export default defineComponent({
  components: {
    [Switch.name]: Switch,
    [Cell.name]: Cell
  },
  setup () {
    const checked = ref(!!localStorage.mode)
    const changeSwitch = inject('switchMode')
    return {
      checked,
      changeSwitch
    }
  }
})
</script>

<style lang="less">
    // 建议theme变量放在全局
    body {
        --primary-bg: #fff;
    }
    body[mode="dark"] {
        --primary-bg: #000;
        --primary-color: #fff;
    }
</style>
<style lang="less" scoped>
    .dark-container {
        width: 100vw;
        height: 100vh;
        text-align: left;
        background-color: var(--primary-bg);
        /deep/ .van-cell {
            background-color: var(--primary-bg);
            span {
                color: var(--primary-color);
            }
        }
    }
</style>
